<template>
  <el-scrollbar
    :native="false"
    :noresize="true">
    <el-menu
      default-active="1-1"
      class="nav-class"
      :unique-opened="true"
      :collapse="!isCollapse"
      @select="handleSelect">
      <el-menu-item 
        index="0"
        class="menu-title"
        disabled>
        <img src="../../assets/logo.png" alt="logo">
        <template #title>
          <span>公司名称</span>
        </template>
      </el-menu-item>
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <template #title>导航二</template>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <template #title>导航三</template>
      </el-menu-item>
      <el-submenu index="4">
        <template #title>
          <i class="el-icon-setting"></i>
          <span>导航四</span>
        </template>
        <el-menu-item index="4-1">选项4-1</el-menu-item>
        <el-menu-item index="4-2">选项4-2</el-menu-item>
        <el-menu-item index="4-3">选项4-3</el-menu-item>
        <el-menu-item index="4-4">选项4-4</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template #title>
          <i class="el-icon-location"></i>
          <span>导航五</span>
        </template>
        <el-menu-item index="5-1">选项1</el-menu-item>
        <el-menu-item index="5-2">选项2</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts">
import {
  ElMenu,
  ElMenuItem,
  ElSubmenu,
  ElIcon,
  ElScrollbar
} from "element-plus";

import { computed, defineComponent, onMounted, ref, watchEffect } from "vue";

export default defineComponent({
  name: "NavView",
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu,
    ElIcon,
    ElScrollbar
  },
  props: {
    isCollapse: Boolean,
    navWidth: {
      type: String,
      default: '200'
    }
  },
  setup: (props) => {
    // 动态设置导航的宽度
    const widthCss = `.nav-class:not(.el-menu--collapse){width: ${props.navWidth}px;}`;

    const cssLink = document.createElement('style');
    cssLink.setAttribute('type', 'text/css');
    cssLink.appendChild(document.createTextNode(widthCss));
    // 将 <style> 元素加到页面中
    document.head.appendChild(cssLink);

    // const isCollapse = computed<boolean>(() => !props.collapse);

    // 列表项选中事件
    const handleSelect = (key: string) => {
      console.log(key);
    }

    return {
      // isCollapse,
      handleSelect
    };
  }
});
</script>


<style lang='scss'>
.nav-class {
  height: 100%;
  background-color: inherit !important;
  border-right-width: 0 !important;
  box-sizing: border-box;
  color: #3c4858;
  
  &.el-menu--collapse {
    .menu-title {
      display: list-item;
    }
  }

  .menu-title {
    display: flex;
    width: 100%;
    padding: 0 8px !important;
    line-height: 54px !important;
    border-bottom: 1px solid rgba(100, 100, 100, 0.3);
    align-items:center;
    opacity: 1 !important;
    cursor: default !important;

    div {
      padding: inherit !important;
    }

    img {
      width: 48px;
      height: 48px;
    }

    span {
      display: inline-block;
      width: 100%;
      margin: 0 5px;
      color: #3c4858;
      font-size: 1rem;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .el-menu-item.is-active {
    background-color: #00bcd4 !important;
    box-shadow: 0 2px 2px 0 rgb(160, 160, 160);
    color: #fff;
  }

  .el-menu-item, .el-submenu {
    margin-top: 5px !important;
  }

  .el-menu-item, .el-submenu > div {
    border-radius: 3px;
  }

  .el-submenu.is-active > div {
    background-color: hsla(0, 0%, 50%, 0.2) !important;
  }
}
</style>